<template>
  <div class="winning-info">
    <div class="nav-top-bar border-bottom">
      <div class="nav-item">
        <div class="svg-wrapper hover-style">
          <svg class="svg" aria-hidden="true">
            <use xlink:href="#iconindex_remencaizhong"></use>
          </svg>
        </div>
      </div>
      <div class="wrapper" ref="wrapper">
        <ul class="tabs" ref="tabs">  
          <div 
            is="li"
            ref="tab"
            class="nav-item border-left hover-style" 
            v-for="(item, index) in winningInfo"
            :key="item.id"
            @click="handleClick(index)"
            >
            <span 
              ref="tabname"
              class="lottery-name"
              :class="activeIndex == index ? 'active' : ''"
            >
              {{item.lotteryName}}
            </span>
          </div>
        </ul>
      </div>
    </div>
    <lottery-info-components 
      :winningNumbers="currentLotteryInfo"
      :activeIndex="activeIndex"
      >
    </lottery-info-components>
  </div>
</template>

<script>
import NumberSelector from '@/components/base/number-selector/number-selector'
import LotteryInfoComponents from '@/pages/home/components/lottery-info-components/lottery-info-components'
import BScroll from 'better-scroll'
export default {
  components: {
    NumberSelector,
    LotteryInfoComponents
  },
  props: {
    winningInfo: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      activeIndex: 0,
    }
  },
  mounted() {
    this.initialBStroll()
  },
  methods: {
    // 设置保存active index
    handleClick(index) {
      this.activeIndex = index
    },
    initialBStroll() {
      let width = 0
      for (let i = 0; i < 6; i++) {
        width += this.$refs.tab[i].getBoundingClientRect().width
        this.$refs.tabname[i].style.left = (this.$refs.tab[i].getBoundingClientRect().width - this.$refs.tabname[i].getBoundingClientRect().width) / 2 + 'px'
      }
      this.$refs.tabs.style.width = width + 'px'
      if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.wrapper, {
              startX: 0,
              click: true,
              scrollX: true,
              scrollY: false
          })
      } else {
          this.scroll.refresh()
      }
    },
  },
  computed: {
    // currentTab对应的彩票信息
    currentLotteryInfo() {
      return this.winningInfo[this.activeIndex]
    },
    // currentPath 当前标签对应的path
    currentPath() {
      return this.winningInfo[this.activeIndex].path
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    @import '~@/assets/styles/mixins.styl'
    .winning-info
      position absolute
      bottom 0
      right 0
      width 940px
      height 155px
      .nav-top-bar
        display flex
        align-items center
        height 48px
        line-height 48px
        color $color-theme-dark
        background #fff
        box-sizing border-box
        border-color $color-divide-line
        .wrapper 
          width 100% 
          height 40px
          line-height 40px
          // overflow-x hidden
          display flex 
          align-items center
          ul 
            display flex
            .nav-item
              height 16px
              line-height 16px
              width 135px
              text-align center
              position relative 
              .lottery-name 
                position absolute 
                padding-bottom 14px
                left 0
                &.active
                  color $color-theme-red
                  border-bottom 2px solid $color-theme-red
        .nav-item
          height 16px
          line-height 16px
          width 135px
          text-align center
          position relative 
          .svg-wrapper
            position absolute 
            top -33px 
            left 28px
            .svg 
              font-size 80px
         
</style>